<template>
  <!-- 书写html结构 -->
  <div>
    <!-- 头部刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 粘性布局 -->
      <van-sticky>
        <!-- 标题 -->
        <van-row
          style="
            height: 40px;
            padding-top: 20px;
            line-height: 40px;
            background-color: #f8f8f8;
          ">
          <van-col
            span="3"
            @click="returnTo"
            style="color: #6699ce; font-size: 18px">
            <van-icon name="arrow-left" />
          </van-col>
          <van-col span="18" style="color: #6699ce; font-size: 18px"
            >余额明细</van-col
          >
          <van-col span="3"></van-col>
        </van-row>
      </van-sticky>
      <!-- 空白 -->
      <!-- 头像 -->
      <van-tabs v-model="active">
        <van-tab title="全部">
          <van-empty description="描述文字" v-if="userDetail == null"/>
          <div v-for="(item, index) in userDetail">
            <van-row
              style="margin-top: 30px"
              v-if="
                (item.rechargeMoney != null) & (item.rechargeMoney != null)
              ">
              <van-col span="7" style="font-size: 16px; font-weight: bold"
                >充值({{ item.storeName }})</van-col
              >
              <van-col span="10"></van-col>
              <van-col
                span="7"
                style="font-size: 16px; font-weight: bold; color: #83bbca"
                >+{{ item.accountMoney }}
              </van-col>
            </van-row>
            <van-row style="margin-top: 30px" v-if="item.expenditure != null">
              <van-col span="7" style="font-size: 16px; font-weight: bold"
                >消费({{ item.storeName }})</van-col
              >
              <van-col span="10"></van-col>
              <van-col
                span="7"
                style="font-size: 16px; font-weight: bold; color: #83bbca"
                >-{{ item.expenditure }}
              </van-col>
            </van-row>
          </div>
        </van-tab>

        <van-tab title="充值记录">
          <van-empty
            v-if="userDetail == null"
            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
            description="描述文字" />

          <div v-for="(item, index) in userDetail">
            <van-row
              style="margin-top: 30px"
              v-if="
                (item.rechargeMoney != null) & (item.rechargeMoney != null)
              ">
              <van-col span="7" style="font-size: 16px; font-weight: bold"
                >充值({{ item.storeName }})</van-col
              >
              <van-col span="10"></van-col>
              <van-col
                span="7"
                style="font-size: 16px; font-weight: bold; color: #83bbca"
                >+{{ item.accountMoney }}
              </van-col>
            </van-row>
          </div>
        </van-tab>

        <van-tab title="支出记录">
          <van-empty v-if="userDetail == null" description="描述文字" />

          <div v-for="(item, index) in userDetail">
            <van-row style="margin-top: 30px" v-if="item.expenditure != null">
              <van-col span="7" style="font-size: 16px; font-weight: bold"
                >消费({{ item.storeName }})</van-col
              >
              <van-col span="10"></van-col>
              <van-col
                span="7"
                style="font-size: 16px; font-weight: bold; color: #83bbca"
                >-{{ item.expenditure }}
              </van-col>
            </van-row>
          </div>
        </van-tab>
      </van-tabs>
    </van-pull-refresh>
  </div>
</template>

<script>

// import "@/assets/font_x2q6up6l3e/iconfont.css"
//书写组件配置项目 相当于写js代码的地方
//要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式

  props: {
    //注册属性，用来父子组件传递参数使用
  },
  data() {
    //定义数据的地方
    return {
      active: 0,
      isLoading: false, //刷新参数
      userDetail: [],
    };
  },
  created() {
    //生命周期  创建后要做的事情  vue被创建时候执行的
    //获取用户余额详情
    var _this = this;
    this.$http
      .get(
        "/userDetail/queryUserStore?userId=" +
          this.$route.query.userId +
          "&storeId=" +
          this.$route.query.storeId
      )
      .then(function (response) {
        console.log(JSON.stringify(response));
        if (response.data.code == 200) {
          // _this.userDetail = response.data.data;
          _this.userDetail = response.data.data;
        }
      })
      .catch(function (error) {
        _this.$toast("获取余额详细出错。。。");
      });
  },
  mounted() {
    // 生命周期  挂载完成后
  },
  methods: {
    returnTo() {
      this.$router.go(-1);
    },
    //  方法事件处理
    //刷新方法
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        //调用请求
      }, 1000);
    },

    jump(uri) {
      this.$router.push(
        {
          name:uri,query:{storeId:this.$route.query.storeId}
        }
        
      );
    },
  },
  components: {
    // 组件注册的地方 相当于pom文件
  },
};
</script>
